.dot-box-contain{
    .dot{//点
        width: 20px;
        height: 20px;
        background-color: black;
        border: 1px solid white;
        border-radius: 20px;
    }
    .dice-box{//盒子
        display: flex;//每个盒子都设置display
        width:100px;
        height:100px;
        background-color: white;
        border:1px solid black;
    }
}


.dice-contain{//页面最外层包含
    width: 100%;
    display: flex;
}

.dice-contain01{//第一个点的包含情况
    .dice-box01{
        //justify-content: flex-start;//默认在开始位置
    }
    .dice-box02{
        justify-content: center;
    }
    .dice-box03{
        justify-content: flex-end;//在结束为止
    }
    .dice-box04{
        align-items: center;
    }
    .dice-box05{
       justify-content: center;
       align-items: center;
    }
    .dice-box06{
       justify-content: flex-end;
       align-items: center;
    }
    .dice-box07{
       align-items: flex-end;
    }
    .dice-box08{
       justify-content: center;
       align-items: flex-end;
    }
    .dice-box09{
       justify-content: flex-end;
       align-items: flex-end;
    }
   
    
}

.dice-contain02{//第二个点的包含情况
    .dice-box01{
        //justify-content: flex-start;//默认在开始位置
    }
    .dice-box02{
        justify-content: center
    }
    .dice-box03{
        justify-content: flex-end;//在结束为止
    }
    .dice-box04{
        align-items: center;
    }
    .dice-box05{
       justify-content: center;
       align-items: center;
    }
    .dice-box06{
       justify-content: flex-end;
       align-items: center;
    }
    .dice-box07{
       align-items: flex-end;
    }
    .dice-box08{
       justify-content: center;
       align-items: flex-end;
    }
    .dice-box09{
       justify-content: flex-end;
       align-items: flex-end;
    }
}



